<script setup>
import { ref } from 'vue'
import ProcessControl from './ProcessControl.vue' // 流程控制组件
import PermissionControl from './PermissionControl.vue' // 权限控制组件

const activeTab = ref('first')
</script>

<template>
  <div class="setting">
    <div class="top-filter">
      <div class="top-filter-left">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="流程控制" name="first"></el-tab-pane>
          <el-tab-pane label="权限控制" name="second"></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <ProcessControl v-if="activeTab === 'first'" />
      <PermissionControl v-else-if="activeTab === 'second'" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.setting {
  width: 100%;
  height: 100%;
  background-color: rgb(239, 239, 239);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.top-filter {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 9;
  flex-shrink: 0;
  /* 防止被压缩 */
}

.top-filter-left {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;

  .top-filter-btn {
    width: 80px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    user-select: none;

    .top-filter-btn-icon {
      width: 20px;
      height: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}
</style>